<template>
  <div v-loading="loading" class="app-container">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item name="1">
        <template slot="title">
          <i class="el-icon-search" />搜索栏
        </template>
        <div class="head-container">
          <el-form class="searchform" :model="params" :inline="true" size="mini" label-width="auto">
            <el-row>
              <el-col :span="8">
                <el-form-item label="沃尔玛品牌号">
                  <el-input v-model="params.wmBrandId" size="mini" placeholder="输入搜索" clearable style="width: 200px;" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="沃尔玛品牌名称">
                  <el-input v-model="params.wmBrandName" size="mini" placeholder="输入搜索" clearable style="width: 200px;" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="绑定状态">
                  <el-select v-model="params.mappingFlag" placeholder="选择搜索" clearable size="mini" style="width: 200px">
                    <el-option v-for="item in getOptions().bindStatuses" :key="item.key" :label="item.name" :value="item.val" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item>
                  <el-button size="mini" type="primary" style="float:right;margin-left:0px;" round icon="el-icon-refresh" @click="resetForm">重置</el-button>
                  <el-button size="mini" type="primary" style="float:right;margin-left:0px;" round icon="el-icon-search" @click="toQuery">查询</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-collapse-item>
    </el-collapse>
    <div style="padding-top: 10px">
      <el-button size="mini" type="primary" style="float:right;margin-bottom:5px;margin-left:0px;" round @click="toBatchEdit">批量操作</el-button>
      <el-button size="mini" type="primary" style="float:right;margin-bottom:5px;margin-left:0px;" round @click="doClearSelection">取消选择</el-button>
      <el-table
        ref="dataTab"
        :data="data"
        :row-key="getRowKeys"
        stripe
        size="mini"
        border
        style="width: 100%;"
        @row-click="rowClick"
        @selection-change="handleSelectionChange"
        @expand-change="doExpandChange"
      >
        <el-table-column :reserve-selection="true" type="selection" align="center" width="55" />
        <el-table-column :reserve-selection="true" label="展开" type="expand" width="55">
          <template slot-scope="scope">
            <div v-loading="scope.row.loading">
              <el-table :data="scope.row.mappingList" stripe size="mini" border style="width: 100%;">
                <el-table-column label="渠道" prop="channelName" />
                <el-table-column label="渠道品牌号" prop="channelBrandId" />
                <el-table-column label="渠道品牌名称" prop="channelBrandName" />
              </el-table>
            </div>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="沃尔玛品牌号" prop="wmBrandId" :width="colWidths.wmBrandId" />
        <el-table-column :show-overflow-tooltip="true" label="沃尔玛品牌名称" prop="wmBrandName" :width="colWidths.wmBrandName" />
        <el-table-column :show-overflow-tooltip="true" label="绑定状态" prop="mappingFlag" :width="colWidths.mappingFlag">
          <template slot-scope="scope">
            <div v-for="bindStatus in getOptions().bindStatuses" :key="bindStatus.val">
              <span v-if="scope.row.mappingFlag === bindStatus.val">{{ bindStatus.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="更新时间" prop="updateTime">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.updateTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="更新人" prop="updateBy" :width="colWidths.updateBy" />
        <el-table-column label="操作" prop="operation" align="left" fixed="right" width="100">
          <template slot-scope="scope">
            <el-link size="mini" type="primary" style="margin-left:0px;" @click="toBind(scope.row)">
              <span style="font-size: 12px;">操作</span>
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <el-pagination
        :total="total"
        :current-page.sync="currentPage"
        :page-sizes="[10,50,100,500]"
        style="margin-top: 8px;"
        layout="total, prev, pager, next, sizes"
        @size-change="sizeChange"
        @current-change="pageChange"
      />
    </div>
    <mappingBind ref="mappingBind" :parent="parent" />
  </div>
</template>

<script>
import { lazyLoadWmBrandMapping } from '@/api/coi/mapping/brand'
import initData from '@/api/coi/itemCenterInitData'
import mappingBind from './brand-edit-bind'
import { getChannelOptions } from '@/api/coi/category/category'
import { getOptions } from '@/views/coi/mapping/js/options'
import { parseTime } from '@/utils/index'
import lStorage from '@/utils/lStorage'
import { getPropValByPropNameVal } from '@/utils/selectUtil'
import { messageShowTool } from '@/utils/messageUtil'

export default {
  components: { mappingBind },
  mixins: [initData],
  data() {
    return {
      activeName: '1',
      parent: this,
      loading: false,
      currentObj: this,
      mappingList: [],
      brandNameDialog: false,
      wmdjBrandName: ''
    }
  },
  created() {
    this.$nextTick(() => {
      this.initChannelOptions()
      this.init()
    })
  },
  methods: {
    parseTime,
    getPropValByPropNameVal,
    messageShowTool,
    getOptions,
    beforeInit() {
      this.url = process.env.VUE_APP_BASE_API6 + '/mapping/brand/queryBrandMappingList'
      this.params.pageNum = this.page
      this.params.pageSize = this.size
      return true
    },
    // 初始化channelOptions
    initChannelOptions() {
      const item = lStorage.getItem('channelOptions')
      if (!item) {
        getChannelOptions().then(res => {
          if (res && res.result) {
            lStorage.setItem('channelOptions', res.result)
          }
        })
      }
    },
    // 查询
    toQuery() {
      this.page = 1
      this.currentPage = 1
      this.init()
      this.doClearSelection()
    },
    // 查询栏重置触发
    resetForm() {
      this.params = {}
      this.syncTime = []
      this.toQuery()
    },
    // 点击行触发
    rowClick(row) {
      this.$refs.dataTab.clearSelection()
      this.$refs.dataTab.toggleRowSelection(row, true)
    },
    // 列表多选框触发
    handleSelectionChange(val) {
      this.mappingList = val
    },
    // 翻页选择row的key值
    getRowKeys(row) {
      return JSON.stringify(row)
    },
    // 清空选择项
    doClearSelection() {
      this.mappingList = []
      this.$refs.dataTab.clearSelection()
    },
    // 跳转编辑页面
    toAdd() {
      const _this = this.$refs.mappingEdit
      _this.changType = 1
      _this.dialog = true
    },
    toBind(val) {
      if (val) {
        this.mappingList = []
        this.mappingList.push(val)
      }
      this.toBatchEdit()
    },
    // 批量绑定
    toBatchEdit() {
      if (this.mappingList.length < 1) {
        this.messageShowTool('请选择需要编辑的item。', 'error')
        return
      }
      if (this.mappingList.length > 50) {
        this.messageShowTool('单次操作数量上限：50', 'error')
        return
      }
      const mappingBind = this.$refs.mappingBind
      mappingBind.bindPageTitle = '渠道品牌映射'
      mappingBind.channelOptions = lStorage.getItem('channelOptions').value
      console.log(mappingBind.channelOptions)
      if (this.mappingList && this.mappingList.length === 1) {
        lazyLoadWmBrandMapping(this.mappingList[0].wmBrandId).then(res => {
          if (res && res.result) {
            mappingBind.channelOptions.forEach(channel => {
              res.result.forEach(brandObj => {
                if (channel.channelId === brandObj.channelId) {
                  channel.brandOptions = [brandObj]
                  channel.channelBrandId = brandObj.channelBrandId
                }
              })
            })
          }
          mappingBind.$forceUpdate()
        }, error => {
          console.log(error)
        })
      }
      mappingBind.dialog = true
    },
    // 展开行
    doExpandChange(row, expandedRows) {
      if (!row.mappingList) {
        this.$set(row, 'loading', true)
        lazyLoadWmBrandMapping(row.wmBrandId).then(res => {
          if (res && res.result) {
            this.$set(row, 'mappingList', res.result)
          }
          this.$set(row, 'loading', false)
        }, error => {
          console.log(error)
          this.$set(row, 'loading', false)
        })
      }
    }
  }
}
</script>
